<template>
    <div class="login-container">

        <div class="bg-image" :style="{ backgroundImage: `url(${bgUrl})` }" ref="bgImage"></div>


        <div class="login-form">
            <h2 class="title">欢迎登录</h2>


            <div class="form-item">
                <el-input v-model="username" placeholder="请输入用户名" prefix-icon="el-icon-user"
                    class="input-item"></el-input>
            </div>


            <div class="form-item">
                <el-input v-model="password" type="password" placeholder="请输入密码" prefix-icon="el-icon-lock"
                    class="input-item"></el-input>
            </div>

            <div class="form-item btn-group">
                <el-button type="primary" @click="handleLogin" class="login-btn">
                    立即登录
                </el-button>
                <el-button type="text" @click="handleReset" class="reset-btn">
                    忘记密码？
                </el-button>
            </div>

            <!-- 注册提示 -->
            <div class="register-tip">
                还没有账号？<el-link @click="handleRegister">立即注册</el-link>
            </div>

            <div class="phone-login-tip">
                <el-link @click="handlePhoneLogin" class="phone-login-link">
                    <i class="el-icon-phone"></i> 手机号登录
                </el-link>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import http from '@/http'
const router = useRouter()
const bgUrl = 'https://img2.baidu.com/it/u=217257476,1225573823&fm=253&app=120&f=JPEG?w=1422&h=800'


const username = ref('')
const password = ref('')

function handleLogin() {
    http({
        method: 'post',
        url: 'login/',
        data: {
            uname: username.value,
            password: password.value
        }
    }).then((resp) => {
        console.log(resp);

        if (resp.data.code === 0) {
            ElMessage.success('登录成功');
            router.push('/myself')
        } else {
            ElMessage.error('登录失败');
        }
    })
}


const handleReset = () => {
    username.value = ''
    password.value = ''
}


const handleRegister = () => {
    ElMessage.info('跳转至注册页面')
    router.push('/reg')
}

const handlePhoneLogin = () => {
    ElMessage.info('跳转至手机号登录页面')
    router.push('/plogin')
}

// 背景视差效果（不变）
let isDragging = false
let startY = 0
const bgImage = ref<HTMLDivElement>()

const handleMouseMove = (e: MouseEvent) => {
    if (isDragging) {
        const deltaY = e.clientY - startY
        bgImage.value!.style.backgroundPositionY = `${deltaY * 0.8}px`
        startY = e.clientY
    }
}

const handleMouseDown = (e: MouseEvent) => {
    isDragging = true
    startY = e.clientY
    document.addEventListener('mousemove', handleMouseMove)
}

const handleMouseUp = () => {
    isDragging = false
    document.removeEventListener('mousemove', handleMouseMove)
}
</script>

<style scoped lang="scss">
.login-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #0a192f;
}

.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.7);
    transition: background-position 0.3s ease;
}

.login-form {
    position: relative;
    z-index: 10;
    width: 400px;
    padding: 40px;
    margin: 50px auto;
    background: rgba(10, 25, 47, 0.9);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    .title {
        color: #fff;
        text-align: center;
        margin-bottom: 30px;
        font-size: 24px;
        font-weight: 500;
    }

    .form-item {
        margin-bottom: 20px;

        .input-item {
            width: 100%; // 确保输入框占满宽度
        }
    }

    .btn-group {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .login-btn {
        width: 60%; // 调整登录按钮宽度
        height: 48px;
        font-size: 16px;
    }

    .reset-btn {
        color: #409eff;
        margin-top: 0; // 移除默认上边距
    }

    .register-tip,
    .phone-login-tip {
        margin-top: 30px;
        color: #fff;
        text-align: center;

        .el-link {
            color: #409eff;
            font-weight: 500;
            text-decoration: none;

            &:hover {
                color: #66b1ff;
            }
        }
    }
}

// 响应式设计
@media (max-width: 768px) {
    .login-form {
        width: 90%;
        max-width: 360px;
        padding: 30px;
    }
}
</style>